<template>
  <div class="container">
    <div class="pad-t-10 pad-b-16 cart-tab">
      <div class="cart-tab-bar">
        <van-tabs :active="activeIndex" @change="tabClick" type="card" color="#FF5B2A">
          <van-tab :title="item" v-for="(item, index) in statusList" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="height-50"></div>
    <div class="shop-wrap mar-t-10" v-if="effectiveList.length !== 0">
      <div v-for="(item,index) in effectiveList" :key="index">
        <van-swipe-cell :right-width="54" @close="onGoodClose(item, index, $event)" async-close>
          <div class="v-align-c pad-r-15 pad-t-14 pad-b-14">
            <div class="mar-l-10 mar-r-10" @click="goodCheckChange(index)">
              <van-checkbox :value="item.checked" checked-color="#ff6529"></van-checkbox>
            </div>
            <div class="flex flex-item" @click="goPage(item)">
              <div class="pos-rel">
                <!-- 跨境图标 -->
                <div class="cross-border-pic">
                  <!-- 跨境保税 -->
                  <img
                    v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                    :src="fileSpace + '/images/icon-cross-border.png'"
                    class="icon-cross-border"
                    alt="">
                  <!-- 海外直邮 -->
                  <img
                    v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                    :src="fileSpace + '/images/icon-cross-border-22.png'"
                    class="icon-cross-border"
                    alt="">
                </div>
                <img v-if="item.goodsImageUrl" class="shop-img" :src="item.goodsImageUrl"/>
              </div>
              <div class="flex-item mar-l-12 mar-t-7">
                <div class="line-2 height-42">{{item.title}}</div>
                <div v-if="item['ladderAuth'] === 1">
                  <swiper class="swiper-price-box" :current="item.curIndex">
                    <block v-for="(listitem, listindex) of item.tempLadderPriceList" :key="listindex">
                      <swiper-item catchtouchmove="stopTouchMove" class="swiper-price-item" :class="listitem.length === 3 ? 'flex-style-1':'flex-style-2'">
                        <div v-for="(subitem, subindex) of listitem" :key="subindex">
                          <p :class="subitem.isActive ? 'font-red-sku' : 'font-gray-sku'">￥<span>{{subitem.ladderPrice}}</span></p>
                          <span style="text-align: left">{{subitem.ladderNum}}个起批</span>
                        </div>
                      </swiper-item>
                    </block>
                  </swiper>
                </div>
                <div class="font-12 color-r mar-t-5" v-else-if="!item.isAchieve">{{item.wholesaleNum}}{{item.unit}}起批</div>
                <div v-else class="height-24"></div>
                <!-- 单规格 -->
                <div v-if="item.skuFlag === 0" style="background: #f8f8f8;padding: 5px;margin-top: 20rpx;width: 135%;margin-left: -180rpx;border-radius: 8rpx;">
                  <div class="flex flex-between font-12 pad-r-10" v-for="(skuitem, skuIndex) in item.shoppingCartList" :key="skuIndex">
                    <!-- 单规格阶梯价 -->
                    <div v-if="item.ladderAuth === 1">
                      <span class="color-r">￥{{item.curGoodsPrice}}</span>/{{item.unit}} &nbsp;
                      <!-- <span v-if="item.showDifference" class="rise-price">距加入{{item.differenceStatus}}{{item.difference}}元</span> -->
                    </div>
                    <div v-else class="color-r">￥{{skuitem.wholesalePrice}}</div>
                    <div class="stepper-box">
                      <van-stepper @click.stop="stopDefaultEvent" :value="skuitem.goodsNum" integer @change="onStepChange(index , skuIndex, $event)" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div slot="right">删除</div>
        </van-swipe-cell>
        <!-- 多规格 -->
        <div class="pad-r-15" v-if="item.skuFlag === 1">
          <van-swipe-cell :right-width="54" @close="onSkuClose(skuitem, skuIndex, index, $event)" async-close v-for="(skuitem, skuIndex) in item.shoppingCartList" :key="skuIndex">
            <div class="v-align-c sku-wrap">
              <div class="mar-l-10 mar-r-10" @click="skuCheckChange(skuIndex, index)">
                <van-checkbox :value="skuitem.checked" checked-color="#ff6529"></van-checkbox>
              </div>
              <div class="flex flex-between flex-item sku-bar pad-t-10 par-b-10">
                <div class="font-12 font-color-6 flex-item">
                  <div class="flex">
                    <div>规格：</div>
                    <div class="width-160">{{skuitem.skuDetail}}</div>
                  </div>
                  <div v-if="item.ladderAuth === 1">
                    <span class="color-r">￥{{item.curGoodsPrice}}</span>/{{item.unit}} &nbsp;&nbsp;
                    <span v-if="item.showDifference" class="rise-price">比加入{{item.differenceStatus}}{{item.difference}}元</span>
                  </div>
                  <div v-else><span class="color-r">￥{{skuitem.wholesalePrice}}</span>/{{item.unit}}</div>
                </div>
                <div class="stepper-box">
                  <van-stepper :value="skuitem.goodsNum" integer @change="onStepChange(index ,skuIndex, $event)" />
                </div>
              </div>
            </div>
            <div slot="right">删除</div>
          </van-swipe-cell>
        </div>
      </div>
      <!-- 底部总计 -->
      <div class="height-45 shop-foot">
        <div class="font-color-6">共{{totalMap.skuSort}}种{{totalMap.skuCount}}件</div>
        <div class="vertical-line"></div>
        <div class="color-r">￥{{totalMap.priceTotal}}</div>
      </div>
    </div>
    <!-- 失效商品 -->
    <div class="invalid-wrap mar-t-10" v-if="noEffectiveList.length !== 0">
      <div class="pad-l-24 pad-r-24 pad-t-8 pad-b-8 flex flex-between">
        <div class="font-w">失效商品</div>
        <div class="color-r" @click="deleteNoEffective">清空</div>
      </div>
      <div class="invalid-list">
        <div class="invalid-mask"></div>
        <div class="pad-b-10" v-for="item in noEffectiveList" :key="item">
          <div class="v-align-c pad-r-15 pad-t-14 pad-b-14">
            <div class="invalid">失效</div>
            <div class="flex flex-item">
              <img v-if="item.goodsImageUrl" class="shop-img" :src="item.goodsImageUrl"/>
              <div class="flex-item mar-l-12 mar-t-7">
                <div class="line-2">{{item.title}}</div>
                <div class="font-12 color-r mar-t-5">{{item.wholesaleNum}}{{item.unit}}起批</div>
                <!-- 单规格 -->
                <div v-if="item.skuFlag === 0">
                  <div class="flex flex-between font-12 pad-r-10 mar-t-5" v-for="(skuitem, skuIndex) in item.shoppingCartList" :key="skuIndex">
                    <div class="color-r">￥{{skuitem.wholesalePrice}}</div>
                    <div>x{{skuitem.goodsNum}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 多规格 -->
          <div v-if="item.skuFlag === 1">
            <div class="sku-bar flex flex-between" v-for="(skuitem, skuIndex) in item.shoppingCartList" :key="skuIndex">
              <div class="flex">
                <div>规格：</div>
                <div class="width-160">{{skuitem.skuDetail}}</div>
              </div>
              <div>×{{skuitem.goodsNum}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 暂无数据 -->
    <div class="nodata" v-if="nodata">
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="title">暂无数据</div>
    </div>
    <div :class="isAchieveCount > 0 ? 'height-92' : 'height-59'"></div>
    <!-- 底部结算栏 -->
    <div class="fixed-wrap">
      <div class="tip" v-if="isAchieveCount > 0">有{{isAchieveCount}}种货品因不符合下单要求无法进行结算</div>
      <div class="flex flex-between">
        <div class="flex flex-between flex-item">
          <div class="mar-l-10 mar-r-10" @click="checkChange(index)">
            <van-checkbox :value="checkAll" checked-color="#ff6529">全选</van-checkbox>
          </div>
          <div class="font-12 text-align-r pad-r-10">
            <div class="font-color-6">总计：<span class="color-r">￥{{totalMap.priceTotal}}</span></div>
            <div class="font-color-9">共{{totalMap.skuSort}}种{{totalMap.skuCount}}件：不含运费</div>
          </div>
        </div>
        <div class="settlement" :class="{'settlement--active': settlement}" @click="submit">结算</div>
      </div>
    </div>
    <!-- 跨境分开结算层 -->
    <van-popup
      :show="showCrossBorder"
      :safe-area-inset-bottom="false"
      catchtouchmove="true"
      round
      position="bottom"
      @close="closeCrossBorder">
      <div class="cb-l-layer">
        <div class="cb-l-title flex flex-center height-48">
          <h2>请分开结算以下商品</h2>
          <div class="cb-l-close" @click="closeCrossBorder">
            <img
              v-if="fileSpace"
              :src="fileSpace + '/images/icon-close-layer.png'"
              class="width-15 height-15"
              alt="">
          </div>
        </div>
        <div class="height-48"></div>
        <div class="cb-l-main">
          <scroll-view scroll-y="" class="clearfix scroll-main">
            <div class="pad-l-15 pad-r-15">
              <ul class="cb-l-list">
                <li
                  v-for="(itemL, indexL) in cbListData"
                  :key="indexL">
                  <div v-if="itemL.warehouseType === 1" class="flex v-align-c pad-t-6 pad-b-9">
                    <img
                      v-if="fileSpace"
                      :src="fileSpace + '/images/icon-cross-border-s1.png'"
                      class="width-21 height-19 mar-r-7"
                      alt="">
                    <h3 class="font-normal">{{ itemL.warehouseName }}</h3>
                  </div>
                  <div v-else class="flex v-align-c pad-t-6 pad-b-9">
                    <img
                      v-if="fileSpace"
                      :src="fileSpace + '/images/icon-cross-border-s2.png'"
                      class="width-21 height-19 mar-r-7"
                      alt="">
                    <h3 class="font-normal">{{ itemL.warehouseName }}</h3>
                  </div>
                  <div class="flex v-align-c" @click="detailCrossBorder(itemL)">
                    <span v-for="(itemG, indexG) in itemL.shoppingCartList" :key="indexG">
                      <img
                        v-if="itemG.goodsImage"
                        :src="itemG.goodsImage"
                        class="width-50 height-50 border-radius-5 mar-r-8"
                        alt="">
                    </span>
                    <div
                      v-if="itemL.shoppingCartList && itemL.shoppingCartList.length > 4"
                      class="cb-l-all flex flex-center border-radius-5 width-50 height-50 font-12">
                      <span>全部</span>
                    </div>
                  </div>
                  <div class="flex v-align-b pad-t-13 pad-b-13">
                    <div class="flex-item">
                      <div class="font-13 pad-b-3">
                        共{{ itemL.goodsTotalNum }}件商品，合计：
                        <span class="font-12 font-color-money">¥ </span>
                        <span class="font-18 font-w font-color-money">{{ itemL.totalPayAmount }}</span>
                      </div>
                      <div v-if="itemL.warehouseType === 1" class="font-13">(不含运费)</div>
                      <div v-else class="font-13">(含进口税，不含运费)</div>
                    </div>
                    <!-- :class="indexL === 1 ? 'submit-btn': 'dis-submit-btn'" -->
                    <div
                      @click="splitSettlement(itemL)"
                      class="settlement-s flex flex-center height-34 font-14 pad-l-20 pad-r-20 mar-b-3">
                      <span>去结算</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </scroll-view>
        </div>
      </div>
    </van-popup>
    <!-- 跨境详情商品层 -->
    <van-popup
      :show="showDetailCrossBorder"
      :safe-area-inset-bottom="false"
      catchtouchmove="true"
      :overlay="false"
      position="bottom"      
      @close="closeDetailCrossBorder">
      <div class="cb-l-title flex flex-center height-48">
        <h2>商品信息</h2>
        <div class="cb-l-close" @click="closeDetailCrossBorder">
          <img
            v-if="fileSpace"
            :src="fileSpace + '/images/icon-close-layer.png'"
            class="width-15 height-15"
            alt="">
        </div>
      </div>
      <div class="height-48"></div>
      <div class="cb-l-main">
        <scroll-view scroll-y="" class="clearfix scroll-main">
          <div class="pad-l-15 pad-r-15">
            <ul class="cb-l-list">
              <li
                v-for="(itemL, indexL) in cbItemData"
                :key="indexL"
                class="flex v-align-t pad-t-11 pad-b-12">
                <img
                  v-if="fileSpace && itemL.goodsImage"
                  :src="itemL.goodsImage"
                  class="width-80 height-80 border-radius-10 mar-r-8"
                  alt="">
                <div class="flex-item">
                  <div class="pad-t-2"></div>
                  <h4 class="font-normal font-16 detail-cb-title">{{ itemL.goodsTitle }}</h4>
                  <div class="flex v-align-b pad-t-28">
                    <div class="flex-item font-12 font-color-9">
                      <div>单价：￥{{ itemL.bestPrice }}</div>
                      <div class="mar-t--4">数量：{{ itemL.goodsNum }}</div>
                    </div>
                    <div class="font-16 font-w font-color-money mar-b--2"><span class="font-11">¥ </span>{{ itemL.goodsSubTotalAmount }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </scroll-view>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { listMapShopCart, deleteNoEffective, deleteShopCartByGoodsId, deleteShopCartById, updateShoppingCart, isOrderCheck } from '@/api/shop'
export default {
  data() {
    return {
      step: 0,
      checkAll: false,
      effectiveList: [], // 有效商品
      noEffectiveList: [], // 失效商品
      enterprise: {},
      shopCarParams: {
        memberId: '',
        customerId: ''
      },
      settlement: false,
      nodata: false,
      isAchieveCount: 0,
      curLadderIndex: 0,
      statusList: ['快递配送', '物流配送'],
      activeIndex: 0, // 默认显示快递配送
      deliveryList: [], // 快递配送列表
      logisticsList: [], // 物流配送列表
      showCrossBorder: false,
      showDetailCrossBorder: false,
      cbListData: [],
      cbItemData: []
    }
  },
  computed: {
    totalMap() {
      let skuSort = 0
      let skuCount = 0
      let priceTotal = 0
      let wholesaleNum = 0
      let settlement = this.effectiveList.filter(item => {
        wholesaleNum = 0
        item.shoppingCartList.forEach(value => {
          if (value.checked) {
            skuSort += 1
            if ('initGoodsLadderPrice' in item) {
              priceTotal += Number(item.curGoodsPrice) * value.goodsNum
            } else {
              priceTotal += Number(value.wholesalePrice) * value.goodsNum
            }
            skuCount += value.goodsNum
            wholesaleNum += value.goodsNum
          }
        })
        // 是否达到起批数
        item.isAchieve = wholesaleNum >= item.wholesaleNum
        // 查找有勾选商品 且 没有达到起批数的
        return wholesaleNum > 0 && !item.isAchieve
      })
      this.isAchieveCount = settlement.length
      if (skuSort !== 0 && settlement.length === 0) {
        this.settlement = true
      } else {
        this.settlement = false
      }
      return {
        skuSort,
        skuCount,
        priceTotal: priceTotal.toFixed(2)
      }
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.checkAll = false
    this.activeIndex = 0
    this.listMapShopCart()
  },
  methods: {
    closeDetailCrossBorder() {
      this.showDetailCrossBorder = false
    },
    closeCrossBorder() {
      this.showCrossBorder = false
    },
    detailCrossBorder(item) {
      this.showDetailCrossBorder = true
      if (item.shoppingCartList && item.shoppingCartList.length) {
        this.cbItemData = []
        this.cbItemData = item.shoppingCartList
      }
    },
    splitSettlement(item) {
      this.toBuyPage(item.cartIds)
      this.closeCrossBorder()
    },
    // 切换快递配送 物流配送
    tabClick(e) {
      this.$pt.showLoading()
      this.nodata = false
      this.checkAll = false
      this.activeIndex = e.mp.detail.index
      if (this.activeIndex === 0) {
        this.effectiveList = 'effectiveList' in this.deliveryList ? this.deliveryList['effectiveList'] : []
      }
      if (this.activeIndex === 1) {
        this.effectiveList = 'effectiveList' in this.logisticsList ? this.logisticsList['effectiveList'] : []
      }
      if (!this.effectiveList.length) {
        this.nodata = true
      }
      this.$pt.hideLoading()
    },
    stopDefaultEvent() {
      return false
    },
    goPage(item) {
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30'})
    },
    stopTouchMove() {
      return false
    },
    listMapShopCart() {
      // 购物车列表请求
      this.nodata = false
      if (!this.getShowBuyCard) {
        this.nodata = true
        return
      }
      this.shopCarParams.memberId = this.getCustomerId || this.getMemberId
      this.shopCarParams.customerId = this.getCustomerId
      this.$pt.showLoading()
      listMapShopCart(this.shopCarParams).then(response => {
        // console.log(response)
        this.$pt.hideLoading()
        if (response.isError) return
        this.effectiveList = []
        this.noEffectiveList = []
        // 过滤快递配送列表 物流配送列表
        if (response.data.effectiveList.length) {
          this.deliveryList = this.$utils.deepClone(response.data)
          this.logisticsList = this.$utils.deepClone(response.data)
          this.deliveryList['effectiveList'] = []
          this.logisticsList['effectiveList'] = []
          for (let item of response.data.effectiveList) {
            // 判断商品是快递配送:1  还是物流配送:2
            if (item['templateType'] === 1) {
              this.deliveryList['effectiveList'].push(item)
            } else if (item['templateType'] === 2) {
              this.logisticsList['effectiveList'].push(item)
            }
          }
          this.isLadderGoods(this.deliveryList['effectiveList'])
          this.isLadderGoods(this.logisticsList['effectiveList'])
          // 有效列表默认显示 快递配送列表
          this.effectiveList = this.activeIndex === 0 ? this.deliveryList['effectiveList'] : this.logisticsList['effectiveList']
        }
        // console.log('1aa', this.deliveryList)
        this.noEffectiveList = response.data.noEffectiveList
        this.enterprise = response.data.enterprise
        if (this.effectiveList.length === 0 && this.noEffectiveList.length === 0) {
          this.nodata = true
        }
      })
    },
    // 判断商品是否是 阶梯价商品
    isLadderGoods(list) {
      // 判断是否属于阶梯价商品
      for (let goodsItem of list) {
        if ('ladderPriceList' in goodsItem) {
          this.$set(goodsItem, 'ladderAuth', 1)
          let curGoodsCount = 0
          goodsItem.shoppingCartList.forEach(item => {
            curGoodsCount += item.goodsNum
          })
          let tempArr = goodsItem.ladderPriceList.filter(filteritem => {
            return +filteritem.ladderNum <= +curGoodsCount
          })
          if (tempArr.length > 0) {
            // initGoodsLadderPrice为当前商品 初始数量所处的 阶梯价 (用于价格间差额的比较)
            this.$set(goodsItem, 'initGoodsLadderPrice', tempArr[tempArr.length - 1]['ladderPrice'])
            // curGoodsPrice 当前商品数量所处的阶梯价 (用于页面上显示当前商品价格)
            this.$set(goodsItem, 'curGoodsPrice', tempArr[tempArr.length - 1]['ladderPrice'])
          } else {
            this.$set(goodsItem, 'initGoodsLadderPrice', goodsItem.ladderPriceList[0]['ladderPrice'])
            this.$set(goodsItem, 'curGoodsPrice', goodsItem.ladderPriceList[0]['ladderPrice'])
          }
          let tempLadderPriceList = []
          let i
          for (let index in goodsItem.ladderPriceList) {
            if (goodsItem.ladderPriceList[index]['ladderPrice'] === goodsItem.curGoodsPrice) {
              this.$set(goodsItem.ladderPriceList[index], 'isActive', true)
              this.$set(goodsItem, 'curIndex', parseInt(index / 3))
            } else {
              this.$set(goodsItem.ladderPriceList[index], 'isActive', false)
            }
            if (index % 3 === 0) {
              i = parseInt(index / 3)
              tempLadderPriceList[i] = []
            }
            tempLadderPriceList[i].push(goodsItem.ladderPriceList[index])
          }
          this.$set(goodsItem, 'tempLadderPriceList', tempLadderPriceList)
          // showDifference为是否显示差额信息
          this.$set(goodsItem, 'showDifference', false)
        } else {
          this.$set(goodsItem, 'ladderAuth', 0)
        }
        this.effectiveList.forEach(item => {
          item.checked = false
          item.isAchieve = true
          item.shoppingCartList.forEach(skuItem => {
            skuItem.checked = false
          })
        })
      }
    },
    deleteNoEffective() {
      this.$pt.showLoading()
      deleteNoEffective(this.getCustomerId).then(response => {
        this.$pt.hideLoading()
        if (response.isError) return
        this.listMapShopCart()
      })
    },
    deleteShopCartByGoodsId(goodsId, index) {
      // 删除商品
      this.$pt.showLoading()
      deleteShopCartByGoodsId(this.getCustomerId, goodsId).then(response => {
        if (response.isError) return
        this.effectiveList.splice(index, 1)
        if (this.effectiveList.length === 0) {
          this.checkAll = false
          this.listMapShopCart()
        }
        this.$pt.hideLoading()
      })
    },
    deleteShopCartById(cartId, skuIndex, index) {
      // 删除商品下的某个sku
      this.$pt.showLoading()
      deleteShopCartById(cartId).then(response => {
        if (response.isError) return
        this.effectiveList[index].shoppingCartList.splice(skuIndex, 1)
        if (this.effectiveList[index].shoppingCartList.length === 0) {
          this.effectiveList.splice(index, 1)
          if (this.effectiveList.length === 0) {
            this.listMapShopCart()
          }
        }
        this.$pt.hideLoading()
      })
    },
    checkChange() {
      // 企业点击事件 全选事件
      this.checkAll = !this.checkAll
      let deepObj = this.$utils.deepClone(this.effectiveList)
      // 子级复选框状态处理
      deepObj.forEach((item, index) => {
        item.checked = this.checkAll
        // 子级复选框状态处理
        item.shoppingCartList.forEach((skuItem, skuIndex) => {
          skuItem.checked = this.checkAll
        })
      })
      this.effectiveList = deepObj
    },
    goodCheckChange(goodIndex) {
      // 商品复选框选择事件
      // 由于深层次的数组对象数据改变不触发视图更新 深拷贝对象
      let deepObj = this.$utils.deepClone(this.effectiveList)
      deepObj[goodIndex].checked = !deepObj[goodIndex].checked
      // 子级复选框状态处理
      deepObj[goodIndex].shoppingCartList.forEach((item, index) => {
        item.checked = deepObj[goodIndex].checked
      })
      this.effectiveList = deepObj
      // 父级复选框状态处理
      let status = this.effectiveList.findIndex(item => {
        return item.checked === false
      })
      this.checkAll = this.statusjudge(status)
    },
    skuCheckChange(skuIndex, index) {
      // sku复选框选择事件
      // 由于深层次的数组对象数据改变不触发视图更新 深拷贝对象
      let deepObj = this.$utils.deepClone(this.effectiveList)
      deepObj[index].shoppingCartList[skuIndex].checked = !deepObj[index].shoppingCartList[skuIndex].checked
      this.effectiveList = deepObj
      // 父级复选框状态处理
      let status = this.effectiveList[index].shoppingCartList.findIndex(item => {
        return item.checked === false
      })
      this.effectiveList[index].checked = this.statusjudge(status)
      // 父级复选框状态处理
      let upStatus = this.effectiveList.findIndex(item => {
        return item.checked === false
      })
      this.checkAll = this.statusjudge(upStatus)
    },
    statusjudge(status) {
      // 复选框状态判断
      if (status === -1) {
        return true
      } else {
        return false
      }
    },
    onStepChange(index, skuIndex, e) {
      // 商品数量选择
      let deepObj = this.$utils.deepClone(this.effectiveList)
      deepObj[index].shoppingCartList[skuIndex].goodsNum = e.mp.detail
      this.effectiveList = deepObj
      let shoppingCart = {
        cartId: this.effectiveList[index].shoppingCartList[skuIndex].cartId,
        goodsNum: this.effectiveList[index].shoppingCartList[skuIndex].goodsNum
      }
      // 阶梯价
      if ('ladderPriceList' in this.effectiveList[index]) {
        let curGoodsCount = 0
        this.effectiveList[index].shoppingCartList.forEach(item => {
          curGoodsCount += item.goodsNum
        })
        let changeLadderArr = this.effectiveList[index].ladderPriceList.filter(filteritem => {
          return filteritem.ladderNum <= curGoodsCount
        })
        let tempIndex = this.effectiveList[index].curIndex
        let curGoodsLadderPrice = changeLadderArr.length > 0 ? changeLadderArr[changeLadderArr.length - 1].ladderPrice : this.effectiveList[index].ladderPriceList[0]['ladderPrice']
        if (this.effectiveList[index].initGoodsLadderPrice !== curGoodsLadderPrice) {
          // difference 提示信息金额与加入进货单时的阶梯价进行对比的差额
          let difference = +(this.effectiveList[index].initGoodsLadderPrice) - +curGoodsLadderPrice
          let differenceStatus = difference > 0 ? '降' : '升'
          this.$set(this.effectiveList[index], 'difference', Math.abs(difference))
          this.$set(this.effectiveList[index], 'differenceStatus', differenceStatus)
          this.effectiveList[index].showDifference = true
        } else {
          this.effectiveList[index].curIndex = tempIndex
          this.effectiveList[index].showDifference = false
        }
        this.effectiveList[index].curGoodsPrice = Number(curGoodsLadderPrice).toFixed(2)
        let _that = this
        for (let i = 0; i < this.effectiveList[index].tempLadderPriceList.length; i++) {
          this.effectiveList[index].tempLadderPriceList[i].forEach(subitem => {
            if (subitem.ladderPrice === curGoodsLadderPrice) {
              subitem.isActive = true
              _that.effectiveList[index].curIndex = i
            } else {
              subitem.isActive = false
            }
          })
        }
      }
      updateShoppingCart(shoppingCart).then((response) => {
        if (response.isError) return false
      })
    },
    // 订单校验（是否含有跨境商品）
    isOrderCheck() {
      this.selCartListEls()
      let params = {
        fromType: '',
        memberId: this.getMemberId,
        customerId: this.getCustomerId,
        goodsId: '',
        cartIds: [],
        skuId: '',
        goodsNum: '',
        addressId: '',
        deliveryType: 1
      }
      // 购物车类型，cartIds有数据时， fromType = 3；
      // 自营商品（goodsType === 10），fromType = 1
      // 分销商品、零售商品（goodsType === 30 || goodsType === 31 || goodsType === 32），fromType = 2
      params.fromType = 3
      params.cartIds = this.selCartList
      return isOrderCheck(params)
    },
    submit() {
      if (!this.settlement) return
      this.isOrderCheck().then(res => {
        if (res.code === 2000 && res.data && res.data.length) {
          // 含有跨境分开流程
          this.cbListData = res.data
          // 跨境分开结算弹窗层
          this.showCrossBorder = true
        } else if (res.code === 101) {
          this.toBuyPage()
        }
      })
    },
    toBuyPage(cartIds) {
      // 购物车结算
      if (!this.settlement) {
        return
      }
      this.selCartListEls()
      let selCartList = []
      if (cartIds) {
        selCartList = cartIds
      } else {
        selCartList = this.selCartList
      }
      this.$pt.navigateTo({
        url: '/pages/shop/buy/main?cartIds=' + selCartList
      })
    },
    selCartListEls() {
      this.selCartList = []
      this.effectiveList.forEach(item => {
        item.shoppingCartList.forEach(item => {
          if (item.checked) {
            this.selCartList.push(item.cartId)
          }
        })
      })
    },
    onGoodClose(item, index, event) {
      // 滑动单元格关闭事件 商品
      const { position, instance } = event.mp.detail
      switch (position) {
        // 点击中间部分触发的事件
        case 'cell':
          instance.close()
          break
        case 'right':
          // 点击滑块右边触发的事件 (删除)
          this.deleteShopCartByGoodsId(item.goodsId, index)
          instance.close()
          break
      }
    },
    onSkuClose(skuitem, skuIndex, index, event) {
      // 滑动单元格关闭事件 sku
      const { position, instance } = event.mp.detail
      switch (position) {
        // 点击中间部分触发的事件
        case 'cell':
          instance.close()
          break
        case 'right':
          // 点击滑块右边触发的事件 (删除)
          this.deleteShopCartById(skuitem.cartId, skuIndex, index)
          instance.close()
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.border-b {
  border-bottom: 1px solid #e9e9e9;
}
.shop-wrap {
  background: white;
  .shop-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15px;
    border-top: 1px solid #e9e9e9;
    .vertical-line {
      width: 1px;
      height: 15px;
      background: #d4d4d4;
      margin: 0 10px;
    }
  }
  /deep/ .van-swipe-cell__right {
    background: #ff4a4a;
    height: 100%;
    top: 0;
    color: white;
    width: 100%;
    padding-left: 13px;
    display: flex;
    align-items: center;
  }
}
.shop-img {
  width: 79px;
  height: 79px;
  border-radius: 5px;
}
// .line-2 {
//   // height: unset;
// }
.color-r {
  color: #ff5540;
}
.rise-price {
  font-size: 22rpx;
  color: #ff5540;
}
.drop-price {
  font-size: 22rpx;
  color: #ff5540;
}
.sku-wrap {
  margin-bottom: 7px;
  &:last-child {
    margin-bottom: 12px;
  }
  .sku-bar {
    background: #f8f8f8;
    border-radius: 4px;
    padding: 7px 10px;
  }
}
.invalid-wrap {
  background: white;
  .invalid-list {
    position: relative;
  }
  .invalid-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    opacity: 0.5;
  }
  .invalid {
    border-radius: 7.25px;
    background: #999999;
    font-size: 11px;
    color: #ffffff;
    width: 30px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    margin: 0 2px 0 7px;
  }
  .sku-bar {
    padding: 8px 10px 8px 7px;
    background: #f8f8f8;
    border-radius: 4px;
    margin-left: 39px;
    margin-right: 15px;
    font-size: 12px;
    margin-bottom: 7px;
  }
}
.fixed-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: white;
  // height: 82px;
  z-index: 9;
  .tip {
    height: 33px;
    background: #ffe4d7;
    font-size: 12px;
    color: #666666;
    line-height: 33px;
    padding-left: 10px;
  }
  .settlement {
    width: 104px;
    text-align: center;
    height: 49px;
    line-height: 49px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    background: #b6b6b6;
    &--active {
      background: linear-gradient(to right, #ff9048, #ff4e23);
    }
  }
}
.nodata {
  padding-top: 130px;
  img {
    margin: 0 auto;
  }
  .title {
    margin-top: 35px;
    text-align: center;
    font-size: 18px;
  }
}
.stepper-box {
  // 步进器左边按钮
  /deep/ .van-stepper__minus {
    border-radius: 50%;
    background: #ededed;
  }
  // 步进器右边按钮
  /deep/ .van-stepper__plus {
    border-radius: 50%;
    background: #ededed;
  }
  // 步进器输入框
  /deep/ .van-stepper__input {
    background: unset;
    width: 28px;
  }
  /deep/ .van-stepper__minus::after,
  /deep/ .van-stepper__plus::after {
    width: 2px;
    height: 10px;
    // background: #999999;
  }
  /deep/ .van-stepper__minus::before,
  /deep/ .van-stepper__plus::before {
    width: 10px;
    height: 2px;
    // background: #999999;
  }
}
.swiper-price-box {
  height: 100rpx;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  .flex-style-1 {
    display: flex;
    justify-content: space-between;
  }
  .flex-style-2 {
    display: flex;
    & > div:nth-child(2) {
      margin-left: 30px;
    }
  }
  .swiper-price-item {
    & > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      p {
        font-size: 24rpx;
        span {
          font-size: 32rpx;
        }
      }
      & > span {
        color: #666666;
        font-size: 20rpx;
        margin-top: -5rpx;
      }
    }
  }
}
.font-red-sku {
  color: #ff5540;
}
.font-gray-sku {
  color: #999999;
}
.cart-tab {
  background: #fff;
  position: fixed;
  left: 0;
  top: 0px;
  width: 100%;
  z-index: 20;
  .cart-tab-bar {
    width: 195px;
    margin: 0 auto;
    /deep/ .van-tabs__scroll--card {
      .van-tabs__nav--card {
        border: 1px solid #FF5B2A !important;
      }
    }
  }
}


</style>
